<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笑话生成器</title>
</head>
<body>
<div >
<label for="customname">输入自定义名字：</label>
<input id="customname" type="text" placeholder="李雷"/>
</div>
<div>
<label for="metric">公制</label>
<input id="metric" type="radio" name="measure" value="metric" checked/>
<label for="american" >美制</label>
<input id="american" type="radio" name="measure"  value="american"/>

</div>
<div>
    <button class="randomize">生成随机笑话</button>
</div>
<p class="story"></p>
<script>
const customName=document.getElementById('customname');
const american=document.getElementById('american');
const randomize=document.querySelector('.randomize');
const story=document.querySelector('.story');

function randomValueFromArray(array){
        const random=Math.floor(Math.random()*Array.length);
        return array[random];

}
let storyText='今天气温35摄氏度，:insertX:出门散步。当走到:insertY:门前时，突然就:insertZ:。人们都惊呆了，李雷全程目睹但并没有慌，因为：insertx:是一个140公斤的胖子，天气又辣么热。';
let insertX=['怪兽威利','大老爹','圣诞老人'];
let insertY=['肯德基','迪士尼乐园','白宫'];
let insertZ=['自燃了','在人行道化成了一坨泥','变成一只鼻涕虫爬走了'];

randomize.addEventListener('click',result);
function result(){
    let newStory=storyText;

    let xItem=randomValueFromArray(insertX);
    let yItem=randomValueFromArray(insertY);
    let zItem=randomValueFromArray(insertZ);
     if(customName.value!==''){
         const name=customName.value;
         newStory=newStory.replace('李雷',name);
     }
     if(american.checked){
         const weight=Math.round(140*2.20462)+'磅';
         const temperature=Math.round(35*9/5+32)+'华氏度';
         newStory=newStory.replace('35摄氏度',temperature);
         newStory=newStory.replace('140公斤',weight);
     }
     story.textContent=newStory;
     story.style.visibility='visible';

}

</script>
    
</body>
</html>